<template>
      <div class="audit-dashboard">
            <h2 class="title">审核部门个人中心</h2>
            <div class="info-list">
                  <div class="info-item">
                        <label>用户名：</label>
                        <span>{{ user.username }}</span>
                  </div>
                  <div class="info-item">
                        <label>电话：</label>
                        <span>{{ user.tel }}</span>
                  </div>
                  <div class="info-item">
                        <label>邮箱：</label>
                        <span>{{ user.email }}</span>
                  </div>
                  <div class="info-item">
                        <label>注册时间</label>
                        <span>{{ user.createdTime }}</span>
                  </div>
                  <div class="info-item">
                        <label>信誉积分</label>
                        <span>{{ user.creditScore }}</span>
                  </div>
                  <div class="info-item">
                        <label>积分等级</label>
                        <span>{{ user.level }}</span>
                  </div>

            </div>

            <div class="btn-wrap">
                  <el-button type="primary" size="medium" @click="openEditDialog">修改信息</el-button>

                  <!-- 增加信用记录按钮 -->
                  <el-button type="success" size="medium" @click="showCreditHistory">信用积分记录</el-button>
            </div>

            <!-- 编辑弹框 -->
            <el-dialog title="修改信息" v-model="editDialogVisible" width="440px" :destroy-on-close="true"
                  :modal-append-to-body="false">
                  <el-form :model="editForm" ref="editFormRef" label-width="100px" class="edit-form">
                        <el-form-item label="用户名">
                              <el-input v-model="editForm.username" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="电话">
                              <el-input v-model="editForm.tel" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="邮箱">
                              <el-input v-model="editForm.email" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="密码">
                              <el-input v-model="editForm.password" type="password" autocomplete="new-password" />
                        </el-form-item>
                  </el-form>

                  <template #footer>
                        <el-button @click="cancelEdit">取消</el-button>
                        <el-button type="primary" @click="submitEdit">提交</el-button>
                  </template>
            </el-dialog>

            <!-- 确认密码弹框 -->
            <el-dialog title="确认密码" v-model="confirmDialogVisible" width="400px"
                  :before-close="handleConfirmDialogClose" :modal-append-to-body="false" :destroy-on-close="true">
                  <el-form :model="confirmForm" ref="confirmFormRef" label-width="130px" class="confirm-form">
                        <el-form-item label="请再次输入密码" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
                              <el-input v-model="confirmForm.confirmPassword" type="password"
                                    autocomplete="new-password" @keyup.enter.native="confirmPassword"
                                    placeholder="确认新密码" />
                        </el-form-item>
                  </el-form>

                  <template #footer>
                        <el-button @click="cancelConfirm">取消</el-button>
                        <el-button type="primary" @click="confirmPassword">确认</el-button>
                  </template>
            </el-dialog>



            <!-- 弹窗展示信用历史记录 -->
            <el-dialog title="信用积分历史记录" v-model="historyDialogVisible" width="600px" :destroy-on-close="true">
                  <el-table :data="creditHistoryList" style="width: 100%">
                        <el-table-column label="时间" prop="createTime" />
                        <el-table-column label="变更值" prop="changeValue" />
                        <el-table-column label="变更类型" prop="changeType" />
                        <el-table-column label="操作人Id" prop="operatorId" />
                        <el-table-column label="原因" prop="reason" />
                  </el-table>
            </el-dialog>

      </div>T
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import useLaborOwnPerson from '@/hooks/labor/useLaborOwnPerson';


const {
      user,
      editDialogVisible,
      editForm,
      oldPassword,
      confirmDialogVisible,
      confirmForm,
      openEditDialog,
      cancelEdit,
      submitEdit,
      cancelConfirm,
      handleConfirmDialogClose,
      confirmPassword,
      historyDialogVisible,
      creditHistoryList,
      showCreditHistory 
} = useLaborOwnPerson();


</script>

<style scoped>
.audit-dashboard {
      max-width: 500px;
      margin: 40px auto;
      padding: 15px 20px;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      color: #2c3e50;
}

.title {
      text-align: center;
      font-weight: 600;
      font-size: 24px;
      color: #34495e;
      margin-bottom: 20px;
      border-bottom: 1px solid #e0e0e0;
      padding-bottom: 10px;
}

.info-list {
      margin-bottom: 30px;
}

.info-item {
      display: flex;
      justify-content: flex-start;
      padding: 10px 0;
      border-bottom: 1px solid #ddd;
      font-size: 17px;
}

.info-item label {
      width: 100px;
      font-weight: 600;
      color: #34495e;
}

.btn-wrap {
      text-align: center;
      margin-bottom: 10px;
}

.edit-form .el-form-item {
      margin-bottom: 20px;
}

.confirm-form .el-form-item {
      margin-bottom: 15px;
}

.el-dialog__footer {
      text-align: right;
}

.el-button {
      min-width: 100px;
}
</style>
